<template>
  <div class='Index wh100 bg-style'  style='background-image:url(../static/image/index_background.jpg)'>
    <div class="shade po-a wh100">
      <div class="logo wh100 bg-style po-a"  style='background-image:url(../static/image/logo.png)'></div>
      <!-- 主页面4个路由器 -->
      <ul class="menus po-a" v-if='isShowmenusInit'>
        <router-link to="/ProductOverview"><li class="menu menu-ProductOverview bg-style" style='background-image:url(../static/image/ProductOverview.png)'></li></router-link>
        <router-link to="/MakeupTeaching"><li class="menu menu-MakeupTeaching bg-style" style='background-image:url(../static/image/MakeupTeaching.png)'></li></router-link>
        <router-link to="/MirrorMakeup"><li class="menu menu-MirrorMakeup bg-style" style='background-image:url(../static/image/MirrorMakeup.png)'></li></router-link>
        <router-link to="/BrandStory"><li class="menu menu-BrandStory bg-style" style='background-image:url(../static/image/BrandStory.png)'></li></router-link>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name:'Index',
    props: {},
    data() {
      return {
        isShowmenusInit:false,
      }
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    computed: {},
    mounted() {
      this.isShowmenusInit=true;
    },
    beforeDestroy() {},
    destroyed() {},
    methods: {},
    components: {}
  }
</script>
<style scoped>
  .menus{
    height: 2.24rem;
    top: 5.5rem;
    left: 2.5rem;
  }
  .menu{
    width: 2.24rem;
    height: 2.24rem;
    float: left;
    margin: 0 0.53rem;
  }
  .menu-ProductOverview:active{
    background-image:url('/static/image/ProductOverview_active.png') !important;
  }
  .menu-MakeupTeaching:active{
    background-image:url('/static/image/MakeupTeaching_active.png') !important;
  }
  .menu-MirrorMakeup:active{
    background-image:url('/static/image/MirrorMakeup_active.png') !important;
  }
  .menu-BrandStory:active{
    background-image:url('/static/image/BrandStory_active.png') !important;
  }
  .shade{
    background: rgba(0,0,0,0.7);
  }

</style>
